<template>
  <div class="bike-wrapper">
    <!--轮播图-->
    <!--文章-->
    <!--每一个分类的前十个产品-->
    <!--山地自行车-->
    <!--        轮播-->
    <div class="bike-banner">
      <el-carousel>
        <el-carousel-item v-for="(item, index) in bannerList" :key="index">
          <img :src="item.image" :alt="item.image" class="small" />
        </el-carousel-item>
      </el-carousel>
      <!--轮播图热门文章-->
      <div class="hot-article">
        <p
          v-for="(item, index) in articleList"
          :key="index"
          @click="articleDetail(item.id)"
        >{{item.title}}</p>
      </div>
    </div>
    <!--        最新动态-->
    <div class="new-article-list">
      <h2 class="article-list-name">最新动态</h2>
      <div class="article-main">
        <div
          class="article-item"
          v-for="(item, index) in articleList"
          :key="index"
          @click="articleDetail(item.id)"
        >
          <!-- <div class="article-thumbnailImg">
            <img src="./../../../common/images/1.png" :alt="item" />
          </div>-->
          <div class="article-content">
            <div class="article-title">{{item.title}}</div>
            <div class="article-desc">{{item.txt}}</div>
          </div>
        </div>
      </div>
    </div>
    <!--        自行车各列表-->
    <div class="bike-type-list">
      <!--            山地车-->
      <div class="mountain-bike-list">
        <h2 class="mountain-bike-name">山地车</h2>
        <div class="mountain-bike-main clearfix">
          <!--                    单个-->
          <div
            class="mountain-bike-item"
            v-for="(item, index) in bikeList"
            :key="index"
            @click="bikeDetail(item.id)"
          >
            <div class="bike-item-img">
              <img :src="item.cover" :alt="item.cover" />
            </div>
            <div class="bike-content">
              <p>{{item.title}}</p>
              <p class="bike-desc">{{item.intro}}</p>
            </div>
          </div>
        </div>
      </div>
      <!--  自行车捷安特-->
      <div class="mountain-bike-list">
        <h2 class="mountain-bike-name">自行车女</h2>
        <div class="mountain-bike-main clearfix">
          <div
            class="mountain-bike-item"
            v-for="(item, index) in bikeList1"
            :key="index"
            @click="bikeDetail(item.id)"
          >
            <div class="bike-item-img">
              <img :src="item.cover" :alt="item" />
            </div>
            <div class="bike-content">
              <p>{{item.title}}</p>
              <p class="bike-desc">{{item.intro}}</p>
            </div>
          </div>
        </div>
      </div>

      <div class="mountain-bike-list">
        <h2 class="mountain-bike-name">自行车捷安特</h2>
        <div class="mountain-bike-main clearfix">
          <div
            class="mountain-bike-item"
            v-for="(item, index) in bikeList2"
            :key="index"
            @click="bikeDetail(item.id)"
          >
            <div class="bike-item-img">
              <img :src="item.cover" :alt="item" />
            </div>
            <div class="bike-content">
              <p>{{item.title}}</p>
              <p class="bike-desc">{{item.intro}}</p>
            </div>
          </div>
        </div>
      </div>

      <div class="mountain-bike-list">
        <h2 class="mountain-bike-name">自行车折叠</h2>
        <div class="mountain-bike-main clearfix">
          <div
            class="mountain-bike-item"
            v-for="(item, index) in bikeList3"
            :key="index"
            @click="bikeDetail(item.id)"
          >
            <div class="bike-item-img">
              <img :src="item.cover" :alt="item" />
            </div>
            <div class="bike-content">
              <p>{{item.title}}</p>
              <p class="bike-desc">{{item.intro}}</p>
            </div>
          </div>
        </div>
      </div>

      <div class="mountain-bike-list">
        <h2 class="mountain-bike-name">自行车儿童</h2>
        <div class="mountain-bike-main clearfix">
          <div
            class="mountain-bike-item"
            v-for="(item, index) in bikeList4"
            :key="index"
            @click="bikeDetail(item.id)"
          >
            <div class="bike-item-img">
              <img :src="item.cover" :alt="item" />
            </div>
            <div class="bike-content">
              <p>{{item.title}}</p>
              <p class="bike-desc">{{item.intro}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { kindList } from "../../../data";
import { dealHtml } from "../../../common/js/myFun";
import { BASE_URL, bikeList, getArticles } from "../../../api";
import image from "../../../common/images/4.png";
import image2 from "../../../common/images/5.png";
import image3 from "../../../common/images/6.png";

export default {
  name: "Home",
  data() {
    return {
      BASE_URL: BASE_URL,
      bikeList: [],
      bikeList1: [],
      bikeList2: [],
      bikeList3: [],
      bikeList4: [],

      articleList: [],
      bannerList: [{ image: image }, { image: image2 }, { image: image3 }]
    };
  },
  mounted() {
    this.getBikeList();
    this.getBikeList1();
    this.getBikeList2();
    this.getBikeList3();
    this.getBikeList4();

    this.getArticles();
  },
  methods: {
    //获取想要的bikeKind
    getKindListItem(kind) {
      let bikeKind = "";
      kindList.forEach(item => {
        item = JSON.parse(JSON.stringify(item));
        if (item.value === kind) {
          bikeKind = item.value;
        }
      });
      return bikeKind;
    },
    //提出第一张图片
    getFirstImg(bikeList) {
      let list = [];
      let count = 0;
      bikeList &&
        bikeList.forEach(item => {
          let imagesArr = JSON.parse(item.images);
          // imagesArr[0].file = this.BASE_URL + imagesArr[0].file;
          item.cover = this.BASE_URL + imagesArr[0].file;
          count++;
          if (count <= 5) {
            list.push(item);
          }
        });
      // eslint-disable-next-line no-console
      console.log(bikeList, "bikeList---getFirstImg");
      return list;
    },

    async getBikeList() {
      let containBike = this.getKindListItem("山地车");
      let res = await bikeList({ kind: containBike });
      // eslint-disable-next-line no-console
      console.log(res, "bikeList");
      if (res.code === 200) {
        // this.bikeList = res.result.bikeList;
        this.bikeList = this.getFirstImg(res.result.bikeList);
      }
    },
    async getBikeList1() {
      let containBike = this.getKindListItem("自行车女");
      let res = await bikeList({ kind: containBike });
      // eslint-disable-next-line no-console
      console.log(res, "bikeList");
      if (res.code === 200) {
        // this.bikeList = res.result.bikeList;
        this.bikeList1 = this.getFirstImg(res.result.bikeList);
      }
    },
    async getBikeList2() {
      let containBike = this.getKindListItem("自行车捷安特");
      let res = await bikeList({ kind: containBike });
      // eslint-disable-next-line no-console
      console.log(res, "bikeList");
      if (res.code === 200) {
        // this.bikeList = res.result.bikeList;
        this.bikeList2 = this.getFirstImg(res.result.bikeList);
      }
    },
    async getBikeList3() {
      let containBike = this.getKindListItem("自行车折叠");
      let res = await bikeList({ kind: containBike });
      // eslint-disable-next-line no-console
      console.log(res, "bikeList");
      if (res.code === 200) {
        // this.bikeList = res.result.bikeList;
        this.bikeList3 = this.getFirstImg(res.result.bikeList);
      }
    },
    async getBikeList4() {
      let containBike = this.getKindListItem("自行车儿童");
      let res = await bikeList({ kind: containBike });
      // eslint-disable-next-line no-console
      console.log(res, "bikeList");
      if (res.code === 200) {
        // this.bikeList = res.result.bikeList;
        this.bikeList4 = this.getFirstImg(res.result.bikeList);
      }
    },

    bikeDetail(id) {
      this.$router.push({ path: `/user/bikeDetail/${id}` });
    },
    getArticles() {
      getArticles().then(res => {
        if (res.code === 200) {
          let listArr = [];
          res.result.articleList.forEach(item => {
            item.txt = dealHtml(item.content);
            listArr.push(item);
          });
          this.articleList = listArr;
        } else {
          this.$message({
            message: res.data,
            type: "error"
          });
        }
      });
    },
    articleDetail(id) {
      this.$router.push({ path: `/user/articleDetail/${id}` });
    }
  }
};
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

/* 中间主要内容 */
.bike-wrapper {
  min-height: 1200px;
}

// 轮播
.bike-banner {
  position: relative;
  width: 100%;
  height: 350px;

  .el-carousel {
    height: 100%;
  }

  .el-carousel__container .el-carousel__container {
    height: 100%;
    width: 100%;
  }

  .el-carousel__container .el-carousel__item {
    width: 100%;
    height: 350px;
  }

  .el-carousel__container .el-carousel__item img {
    width: 100%;
    height: 350px;
    object-fit: cover;
  }

  // 轮播图热门文章
  .hot-article {
    position: absolute;
    width: 20%;
    height: 300px;
    text-align: center;
    border-radius: 10px;
    right: 150px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #121039;
    opacity: 0.6;
    z-index: 99;
    color: #ccc;
    overflow-y: scroll;

    p {
      height: 40px;
      line-height: 40px;
      overflow: hidden;
      padding: 0px 10px;
      cursor: pointer;
      color: #eee;
      font-size: 15px;
    }

    p:hover {
      color: green;
    }
  }

  .hot-article::-webkit-scrollbar {
    display: none;
  }
}

// 最新动态
.new-article-list {
  width: 1200px;
  margin: 0 auto;

  .article-list-name {
    height: 80px;
    line-height: 80px;
    font-size: 20px;
  }

  .article-main {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;

    .article-item {
      width: 380px;
      height: 110px;
      margin-right: 20px;
      margin-bottom: 20px;
      border-radius: 5px;
      box-shadow: 0 0 5px 1px #eee;

      .article-thumbnailImg {
        float: left;
        width: 100px;
        height: 100px;
        padding: 10px;

        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          object-fit: cover;
        }
      }

      .article-content {
        float: left;
        width: 100%;
        height: 110px;
        padding: 10px 10px;

        .article-title {
          height: 20px;
          font-weight: 600;
          overflow: hidden;
          margin-bottom: 10px;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }

        .article-desc {
          height: 50px;
          line-height: 25px;
          color: #888888;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
    }

    .article-item:nth-child(3n) {
      margin-right: 0 !important;
    }

    .article-item:hover {
      box-shadow: 0 0 5px 2px #eee;
    }
  }
}

// 自行车各列表
.bike-type-list {
  // 其中一个列表
  .mountain-bike-list {
    width: 1200px;
    height: 290px;
    margin: 30px auto;

    .mountain-bike-name {
      height: 80px;
      line-height: 80px;
      font-size: 20px;
    }

    .mountain-bike-main {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;

      .mountain-bike-item {
        width: 224px;
        height: 200px;
        box-shadow: 0 0 4px 2px #eee;
        border-radius: 5px;
        margin-right: 20px;
        margin-bottom: 10px;
        cursor: pointer;

        .bike-item-img {
          width: 100%;
          height: 140px;
          border-radius: 5px;
          overflow: hidden;

          img {
            object-fit: cover;
            width: 100%;
            height: 100%;
            border-radius: 5px;
            transition: all 0.4s;
          }

          img:hover {
            transform: scale(1.2);
          }
        }

        .bike-content {
          height: 60px;
          border-top: 1px solid #eee;
          border-radius: 10px;

          p {
            height: 30px;
            // line-height 30px
            padding: 7px 0 0 8px;
            box-sizing: border-box;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }

          .bike-desc {
            font-size: 13px;
            color: #888888;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }
        }
      }

      .mountain-bike-item:nth-child(5n) {
        margin-right: 0 !important;
      }

      .mountain-bike-item:hover {
        box-shadow: 0 0 15px 1px #ccc;
      }
    }
  }
}
</style>
